<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="/agent/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="/agent/css/shenpi.css"/>
     
    <script type="text/javascript" src="/agent/js/jquery.1.9.1.js" ></script>
    <script type="text/javascript" src="/agent/js/rem.js" ></script>
    <script type="text/javascript" src="/agent/js/swiper.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/agent/css/swiper-3.4.2.min.css" />
   <script type="text/javascript" src="/agent/js/layer.js"></script>
    <link rel="stylesheet" type="text/css" href="/agent/css/layer.css" />
    <title>我审批的</title>
</head>
<style>
.pingzheng{
  height: 2.4rem;
  border-bottom: 1px solid #E8E8E8;
  border-top: 1px solid #E8E8E8;
  background: #fff;

}
.pingzheng p{
  height: 0.6rem;
  line-height: 0.6rem;
  padding: 0.2rem 0.3rem 0 0.3rem;
}
.pingzheng p span{
  color: #f3494c;
  float: right;
}
.upload{
  width: 1.18rem;
  height: 1.18rem;
  border: 1px dashed #ccc;
  border-radius: 3px;
  color: #999;
  text-align: center;
  /*line-height: 0.9rem;*/
  font-size: 0.5rem;
}
.z_file em{
  display: block;
  color: #999;
  font-size: 0.2rem;
  font-style: normal;
  position: absolute;
  left: 32%;
  top: 60%;
}
.z_photo {
  width: 6.9rem;
  height: auto;
  padding: 0.3rem;
  overflow: auto;
  clear: both;
}

.z_photo img {
  width: 1rem;
  height: 1rem;
}

.z_addImg {
  float: left;
  margin-right: 0.2rem;
}
img.img_close{
  width: 0.32rem;
  height: 0.32rem;
  position: absolute;
  top: -5px;
  right: -5px;
}
.z_file {
  width: 1rem;
  height: 1rem;
  border: 1px dashed #ccc;
  border-radius: 3px;
  float: left;
  margin-right: 0.2rem;
  position: relative;
}
.z_file span{
  position: absolute;
  color: #999;
  font-size: 0.5rem;
  left: 36%;
  top: 3%;
}
.z_file input::-webkit-file-upload-button {
  width: 1rem;
  height: 1rem;
  border: none;
  position: absolute;
  outline: 0;
  opacity: 0;
}

.z_file input#file {
  display: block;
  width: 1rem;
  height: 1rem;
  border: 0;
  vertical-align: middle;
}
.headerBox{
  width: 1rem;
  height: 1rem;
  position: relative;
  background-size: 100% 100%;
  float: left;
  margin-right: 0.2rem;
}
.imgBox{
  width: 100%;
  height: 100%;
  
}
img.img_close{
  width: 0.32rem;
  height: 0.32rem;
  position: absolute;
  top: -5px;
  right: -5px;
}
</style>
<script>
  $(function() {
    var winHeight = $(window).height();
    $(".mask").css("height", winHeight);
    $(".mask .container").css("margin-top", winHeight / 3);
    $(".tupian .swiper-slide").click(function(){
      $(".mask").show();
    });
    $(".cha").click(function(){
      $(".mask").hide();
      window.location.reload();
    });
  });
</script>
<body>
<div class="top">
    <img src="{$userinfo.avatar}"/>
    <span>{$agent.dep_text}</span>
    <span class="ing">{$order.status_text}</span>
</div>
<!--订单列表-->
<div class="order_list">
    <h2>
        <span>订货单号：{$order.nb}</span>
    </h2>
    {volist name="orderItem" id="vo"}
    <div class="order_list_goods">
        <dl>
            <dt>
                <img src="{$vo.preproductimg_text}">
            </dt>
            <dd class="name">
                <strong>{$vo.preproductname_text}</strong>

            </dd>
            <dd class="pice">￥{$vo.unit_price}<em>x{$vo.num}</em></dd>
        </dl>
    </div>
    {/volist}
</div>
<!--付款凭证-->
<div class="pay">
    {if $order.image}
        <h2>付款凭证</h2>
        <div class="container pay_img">
            <div class="swiper-container swiper1">
                <div class="swiper-wrapper">
                    {volist name="$order.image" id="vo"}
                        <div class="swiper-slide">
                            <img src="/agent/upload/{$vo}"/>
                        </div>
                    {/volist}
                </div>
            </div>
        </div>
    {/if}
    <p>共{:count($orderItem)}件商品&nbsp;&nbsp;&nbsp;合计：<span style="color: #f3494c;">¥{$order.order_price}</span></p>
</div>
<!--收货地址-->
<div class="shou">
    <h2><img class="dizhi" src="/agent/img/address.png"/>&nbsp;收货地址</h2>
    <div class="name2">
        收货人：{$agent.warehouse.name} &nbsp;&nbsp;&nbsp;
        <a href="tel:{$agent.warehouse.tel}">{$agent.warehouse.tel}</a>
    </div>
    <div class="address">
        
        <p>收货地址：{$agent.warehouse.province_text}{$agent.warehouse.city_text}{$agent.warehouse.area_text}{$agent.warehouse.address}</p>
    </div>
</div>
<!--审批流程-->
<div class="liucheng">
    <h2>审批流程</h2>
    <ul>
        {volist name="$order.log" id="vo"}
        <li>
            <div class="left-border">
                <i class="second first"></i>
            </div>
            <div class="shen-left">
              <div class="shen-info">
                <img src="{$vo.avatar}"/> 
                <em class="agent-name">{$vo.username}</em>
                	<em class="agree" style="color: #2abf40;color: #f3494c; "><em style="color: #888;">·{$vo.action}</em></em>
              </div>
                {if $vo.content}
                    <p class="shen-beizhu">“{$vo.content}”</p>
                {/if}
                
            </div>
            <span>{:date('m/d  H:i',$vo['createtime'])}</span>
        </li>
        {/volist}
        <li>
            <div style="height: 0.2rem;margin-left: -1px;"><i class="third"></i></div>
            <img src="{$admin->avatar}"/> {$admin->username}•发货审批中
            <span></span>
        </li>
    </ul>
</div>
  <!--审批意见-->
  <form action="{:url('do_check_save')}" method="post" name="form" id="forms" enctype="multipart/form-data">
      <input type="hidden" value="{$order.id}" name="orderID"> 
      <input type="hidden" value="1" name="git"> 
      <div class="ideas">
          <h2>审批意见</h2>
          <textarea name="content" datatype="*" placeholder="请输入…"></textarea> <!--同意必须-->
      </div>
   <div class="pingzheng">
    <p>发货凭证</p>
    <div class="z_photo">
        <div class="z_file" data-id="1" onclick="fileSelect($(this));">
            <span>+</span>
            <em class="number">0/5</em>
        </div>
        <input type="file" hidden="hidden" name="file[]" id="file_1" onchange="uploadFile();" value="" accept="image/*" multiple  />
        <input type="file" hidden="hidden" name="file[]" id="file_2" onchange="uploadFile();" value="" accept="image/*" multiple  />
        <input type="file" hidden="hidden" name="file[]" id="file_3" onchange="uploadFile();" value="" accept="image/*" multiple  />
        <input type="file" hidden="hidden" name="file[]" id="file_4" onchange="uploadFile();" value="" accept="image/*" multiple  />
        <input type="file" hidden="hidden" name="file[]" id="file_5" onchange="uploadFile();" value="" accept="image/*" multiple  />
        <input type="hidden" name="file_base[]" id="file_base_1" value=""    />
        <input type="hidden" name="file_base[]" id="file_base_2" value=""    />
        <input type="hidden" name="file_base[]" id="file_base_3" value=""    />
        <input type="hidden" name="file_base[]" id="file_base_4" value=""    />
        <input type="hidden" name="file_base[]" id="file_base_5" value=""    />
    </div>
</div>
      <input id='submit_to_save' name='submit_to_save' value='' type='hidden'>
      <input  name='art' value='' type='hidden'><!--同意必须-->
      <div class="button2" style=" position: initial;">
          <div class="agree" id='nexbton' onclick='tj("ok")' >发货</div>
          <input type="hidden" name="wf_backflow" value="0">
         <div class="bohui" id='backbton' onclick='tj("no")'value='back' >驳回</div>
       
      </div>
  </form>
<!--Swiper-->
<div class="swiper-container myswiper" id="origin-img">
    <div class="swiper-wrapper"></div>
    <div class="swiper-pagination"></div>
    <div class="upload"></div>
</div>
<script>

    //同意 驳回
    function tj(val) {
      $('#submit_to_save').val(val);
      if(val == 'no')
      {
        if($('#check_con').val() == '')
        {
          alert('请添加驳回理由');
          return false;
        }
      }
      $('#forms').submit();
    }
  //点击图片变大
  var number = $('.z_file').attr('data-id');
  function fileSelect() {
    document.getElementById('file_'+number).click();
  }
  function uploadFile()
  {
    //var imgUrl = window.URL.createObjectURL(document.getElementById("file_"+number).files[0]);
   var file = document.getElementById("file_"+number).files[0];
   var reader = new FileReader();  
             reader.readAsDataURL(file);  
             reader.onload = function(e){
                    dealImage(this.result,{width:200},function(base){
                        $.ajax({
                                type:'post',
                                url:'/index/agent/upload',
                                data:{file:base},
                                success:function (data) {
                                  console.log(data);
                                  if(data.code == 1){
                                     $("#file_base_"+number).val(data.data);
                                     layer.open({
                                        content: '上传成功',
                                        skin: 'msg',
                                        time: 2 //2秒后自动关闭
                                      });
                                      var html = '<div class="headerBox">\n' +
                                        '            <img class="img_close" onclick="del($(this))" src="/agent/img/img_close.png"/>' +
                                        '            <img id="imgBox_'+number+'" src="'+data.data+'"/>\n' +
                                        '        </div>\n';
                                         $(".z_photo").prepend(html);
                                          $('.number').text(number +'/5');
                                          number++;
                                          $('.z_file').attr('data-id',number);
                                          if(number == 6)
                                          {
                                            $('.z_file').hide();
                                          }
                                       return true;
                                  }else{
                                      layer.open({
                                        content: data.msg,
                                        skin: 'msg',
                                        time: 2 //2秒后自动关闭
                                      });
                                      return false;
                                  }
                                }
                              });
                    });
             }  


  }
  function del(thi) {
    thi.parent().remove();
    number--;
    $('.number').text(number - 1 +'/5');
    if(number != 6 ){
      $('.z_file').show();
    }
    $('.z_file').attr('data-id',number);
    $('#file_'+number).val('');
    $('#file_base_'+number).val('');
  }
 function dealImage(path, obj, callback){
         var img = new Image();
         img.src = path;
         img.onload = function(){
          var that = this;
          // 默认按比例压缩
          var w = that.width,
           h = that.height,
           scale = w / h;
           w = that.width;
           h = that.height;
          var quality = 0.7;  // 默认图片质量为0.7
          //生成canvas
          var canvas = document.createElement('canvas');
          var ctx = canvas.getContext('2d');
          // 创建属性节点
          var anw = document.createAttribute("width");
          anw.nodeValue = w;
          var anh = document.createAttribute("height");
          anh.nodeValue = h;
          canvas.setAttributeNode(anw);
          canvas.setAttributeNode(anh);
          ctx.drawImage(that, 0, 0, w, h);
          // 图像质量
          if(obj.quality && obj.quality <= 1 && obj.quality > 0){
           quality = obj.quality;
          }
          // quality值越小，所绘制出的图像越模糊
          var base64 = canvas.toDataURL('image/jpeg', quality );
          // 回调函数返回base64的值
          callback(base64);
         }
        }

</script>
</body>
</html>
